import React, { useState, useEffect } from 'react'
import { Button, Tag, Modal, Form, Table, message, Input, Card } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import OperaPrompt from '../../../components/OperaPrompt'
import { ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons'
import request from '@/utils/request'
import SaveView from './save'
const { Search } = Input
const { confirm } = Modal
export default () => {
    const [tableData, setTableData] = useState({ list: [], pagination: { total: 0, current: 1 } })
    const [visable, setVisable] = useState(false)
    const [id, setId] = useState(0)
    const [saveForm] = Form.useForm()
    const columns: any = [
        {
            title: '等级名称',
            dataIndex: 'title',
        },
        {
            title: '年费(元)',
            render: (text: any) => <Tag color="cyan">{text} </Tag>,
            align: "center",
            dataIndex: 'annual_fee',
        },
        {
            title: '是否自营',
            render: (text: any) => <Tag color="green">{text ? "是" : "否"} </Tag>,
            align: "center",
            dataIndex: 'is_own',
        },
        {
            title: '创建时间',
            dataIndex: 'created_at',
        },
        {
            title: '操作',
            align: "center",
            render: (text: any, record: any) => (
                <>
                    <Button size="small" type="primary" ghost style={{ marginRight: "6px" }} onClick={() => {
                        setVisable(true)
                        setId(record.id)
                        request(`/store/level/${record.id}`).then((result) => {
                            const data = result.data
                            saveForm.setFieldsValue(data)
                        })
                    }}>编辑</Button>
                    <Button size="small" danger onClick={() => {
                        destroy([record.id])
                    }}>删除</Button>
                </>
            ),
        },
    ];

    const getList = (params: any = {}) => {
        request(`/store/level-list`, { params: { pageSize: params.pageSize ?? 10, ...params } }).then((result) => {
            setTableData({ list: result.data, pagination: { total: result.total, current: params.current ?? tableData.pagination.current } })
        })
    }

    const destroy = (ids: any[]) => {
        confirm({
            title: 'Do you Want to delete these items?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                request(`/store/level-destroy`, {
                    method: "Delete",
                    params: { ids }
                }).then((result) => {
                    message.success("删除成功", 1, () => getList())
                })
            }
        });
    }
    useEffect(() => {
        getList()
    }, [])

    const closeModal = () => {
        setVisable(false)
    }

    return (
        <PageHeaderWrapper title={false}>
            <Card>
                <OperaPrompt dataList={[
                    "不同开店套餐的商家功能权限不同，平台可以设置不同的套餐年费以及权限。",
                    "用户申请入驻或者续签可以选择不同套餐，同时根据入驻年限和套餐支付不同的金额。",
                    "前台用户只能申请加盟店铺，自营只能后台添加店铺可选。"
                ]} />
                <div style={{ padding: "10px 0" }}>
                    <Search
                        placeholder="请输入等级名称"
                        onSearch={value => getList({ title: value })}
                        style={{ width: 400, marginRight: "5px" }}
                        enterButton={<Button type="primary"><SearchOutlined /></Button>}
                    />
                    <Button onClick={() => {
                        setVisable(true)
                        setId(0)
                        saveForm.resetFields()
                    }}>添加</Button>
                </div>
                <Table
                    rowKey="id"
                    dataSource={tableData.list}
                    columns={columns}
                    pagination={{ total: tableData.pagination.total, pageSize: 10, current: tableData.pagination.current }}
                    onChange={(pagination: any, filters: any, sorter: any, extra: any) => {
                        getList({ current: pagination.current, pageSize: pagination.pageSize })
                    }}
                />
                <Modal
                    width="70%"
                    title={id > 0 ? "修改" : "添加"}
                    visible={visable}
                    onOk={() => { }}
                    onCancel={closeModal}
                    getContainer={false}
                >
                    <SaveView saveForm={saveForm} close={closeModal} getList={getList} id={id} />
                </Modal>
            </Card>
        </PageHeaderWrapper>
    )
}